<template>
  <div class="wrapper">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/5-1'}">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/5-1'}">账号管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :span="20" :offset="2" class="column">
        <div>
          登录名
          <el-input
            class="inline-input"
            v-model="state1"
          ></el-input>
        </div>
        <div>
          姓名
          <el-input
            class="inline-input"
            v-model="state2"
          ></el-input>
        </div>
        <div>
          角色
          <el-input
            class="inline-input"
            v-model="state3"
          ></el-input>
        </div>
        <div>
          <el-button type="primary" @click="reset">
            重置
          </el-button>
          <el-button type="success" @click="search">
            搜索
          </el-button>
        </div>
      </el-col>
      <el-col :span="4" :offset="18" style="margin-top: 50px">
        新增账号
        <el-button type="primary" icon="el-icon-circle-plus" circle @click="toadd"></el-button>
      </el-col>
      <el-col :span="18" :offset="2">
        <el-table :data="tableData" stripe border style="margin-top: 20px" v-loading="loading">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="username" label="登录名"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="actor" label="角色"></el-table-column>
          <el-table-column prop="createAt" label="创建时间" width="200" :formatter="dateFormat"></el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button @click="frozen(scope.row)" type="primary">{{state(scope.row.status)?'冻结':'解冻'}}
              </el-button>
              <el-button @click="del(scope.row)" type="danger">删除</el-button>
              <el-button @click="toedit(scope.row)" type="success">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col class="pager">
        <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="parseInt(pager.size)"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(total)"
          @current-change="handleCurrentChange"
          :current-page="parseInt(pager.page)"
          @size-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios'
  import {AccountList, DelAccount, updateAccount} from '@/api/accountmanagement/account'
  export default {
    name: "AccountManagement",
    inject: ['reload'],
    data() {
      return {
        state1: '',
        loading: true,
        login: [],
        name: [],
        total:'',
        actor: [],
        accountinfo: [],
        state2: '',
        state3: '',
        tableData: [],
        pager: {
          page: '',
          size: '10'
        }
      }
    },
    methods: {
      state(status) {
        switch (status) {
          case 1:
            return true;
            break
          case 2:
            return false;
            break
        }
      },
      dateFormat: function (row, column, cellValue) {
        var date = cellValue;
        if (date == undefined) {
          return "";
        }
        return this.$moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
      },
      getAccountInfo() {
        let params = {};
        if (localStorage.accpage) {
          this.pager.page = localStorage.accpage;
        } else {
          this.pager.page = 1;
        }
        if (localStorage.accpagesize) {
          this.pager.size = localStorage.accpagesize;
        } else {
          this.pager.size = 10;
        }
        if (localStorage.accountlogin) {
          params.username = localStorage.accountlogin;
        }
        if (localStorage.accountname) {
          params.name = localStorage.accountname
        }
        if (localStorage.accountactor) {
          params.actor = localStorage.accountactor
        }
        params.page = this.pager.page;
        params.size = this.pager.size;
        params.types = 2;
        AccountList(params).then(this.getAccountSucc);
      },
      getAccountSucc(res) {
        console.log(res);
        if (res) {
          this.loading = false;
          this.total=res.data.totle;
          this.tableData = res.data.UserList;
          console.log(this.tableData);
        }
      },
      search() {
        if (this.state1) {
          localStorage.accountlogin = this.state1;
        }
        if (this.state2) {
          localStorage.accountname = this.state2;
        }
        if (this.state3) {
          localStorage.accountactor = this.state3;
        }
        this.reload();
      },
      reset() {
        localStorage.accountlogin = '';
        localStorage.accountname = '';
        localStorage.accountactor = '';
        this.reload();
      },
      handleCurrentChange(val) {
        console.log(val);
        localStorage.accpage = val;
        this.pager.page = val;
        this.reload();
      },
      handleSizeChange(val) {
        localStorage.accpagesize = val;
        this.pager.size = val;
        this.reload();
      },
      toadd() {
        this.$router.push({name: 'NewAccount'})
      },
      toedit(row) {
        this.$router.push({name: 'EditAccount', params: {index: row.id}})
      },
      del(row) {
        this.$confirm('<div>确定删除账户信息吗?</div><div style="font-size: 12px">删除后账户信息无法找回</div>',
          '提示', {
            confirmButtonText: '确定',
            dangerouslyUseHTMLString: true,
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
          this.$message({
            type: 'success',
            message: '已删除账户信息'
          });
          DelAccount(row.id).then(function (res) {
            console.log(res);
          })
          this.reload();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      frozen(row) {
        if (row.status == 1) {
          this.$confirm('<div>确定冻结账户信息吗?</div><div style="font-size: 12px">冻结后该账号将无法使用</div>',
            '提示', {
              confirmButtonText: '确定',
              dangerouslyUseHTMLString: true,
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
            this.$message({
              type: 'success',
              message: '已冻结账户信息',
            });
            let params = {};
            params.status = 2;
            console.log(params);
            var _this = this;
            updateAccount(row.id, params).then(function (res) {
              console.log(res);
              _this.reload();
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消冻结'
            })
          })
        } else {
          this.$confirm('<div>确定解冻账户信息吗?</div><div style="font-size: 12px">解冻后该账号将可以正常使用</div>',
            '提示', {
              confirmButtonText: '确定',
              dangerouslyUseHTMLString: true,
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
            this.$message({
              type: 'success',
              message: '已解冻账户信息',
            });
            let params = {};
            params.status = 1;
            var _this = this;
            updateAccount(row.id, params).then(function (res) {
              console.log(res);
              _this.reload();
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消解冻'
            })
          })
        }
      },
    },
    mounted() {
      this.getAccountInfo();
    }
  }
</script>

<style lang="less" scoped>
  @import "~styles/z.less";
  @import "~styles/css3.less";
  @import "~styles/variables.less";

  .inline-input {
  width:180px;
  }
.pager{
  /deep/ .el-pagination{
    margin:10px 110px;
  }
}
  .wrapper {
    .w100;
    padding: 10px;
    .column {
      .flexb;
      padding-top: 50px;
      div {
        .flexb;
        align-items: center;
      }
    }
  }
</style>
